<template>
	<view 
		class="userHeadPic" 
		:style="{
			backgroundImage:'url('+ WxHeadPic +')',
			border: UserLevelID && UserLevelID == 2? borderWidth + 'rpx solid rgb(255, 204, 0)': 'none',
			boxSizing: UserLevelID && UserLevelID == 2? 'border-box' : 'none',
			width: width + 'rpx',
			height: height + 'rpx',
		}">
		<view style="position:absolute;z-index:100;display: flex;align-items: flex-end;" :style="{right: right + 'rpx',bottom: bottom + 'rpx'}" v-if="UserLevelID && UserLevelID == 2">
			<image src="/static/icon/authed.png" :style="{ width: imageWidth + 'rpx', height:imageHeight + 'rpx' }"></image>
			<view style=" color: #ffaa00; position: absolute;font-weight: bold" :style="{right: textright + 'rpx', bottom: textbottom + 'rpx', fontSize: size + 'rpx'}" v-if="userInfo.VipLevel != 0">
				<!-- <text v-if="userInfo.VipLavel == 1">Ⅰ</text>
				<text v-if="userInfo.VipLavel == 2">Ⅱ</text>
				<text v-if="userInfo.VipLavel == 3">Ⅲ</text>
				<text v-if="userInfo.VipLavel == 5">Ⅴ</text>
				<text v-if="userInfo.VipLavel == 6">Ⅵ</text>
				<text v-if="userInfo.VipLavel == 8">Ⅷ</text> -->
				<text v-if="userInfo.VipLavel == 1">1</text>
				<text v-if="userInfo.VipLavel == 2">2</text>
				<text v-if="userInfo.VipLavel == 3">3</text>
				<text v-if="userInfo.VipLavel == 5">5</text>
				<text v-if="userInfo.VipLavel == 6">6</text>
				<text v-if="userInfo.VipLavel == 8">8</text>
			</view>
		</view>
		<view style="position: absolute;z-index: 100;display: flex;align-items: flex-end;z-index: 9;" :style="{right: oneRight + 'rpx',top: top + 'rpx'}" v-if="UserLevelID && UserLevelID == 1">
			<image src="/static/icon/authed1.png" :style="{ width: imageWidth + 'rpx', height:imageHeight + 'rpx' }"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 个人信息
			userInfo: {
				type: Object,
				default: {}
			},
			WxHeadPic: {
				type: String,
				default: '',
			},
			// 当前是否是会员 0非会员，1普通会员，2vip
			UserLevelID: {
				type: [Number, String],
				default: 0,
			},
			// 图片宽度
			width: {
				type: [Number, String],
				default: 140
			},
			// 图片高度
			height: {
				type: [Number, String],
				default: 140
			},
			// 光圈宽度
			borderWidth: {
				type: [Number, String],
				default: 6
			},
			
			right: {
				type: [Number, String],
				default: '0'
			},
			oneRight: {
				type: [Number, String],
				default: '0'
			},
			bottom: {
				type: [Number, String],
				default: '-5'
			},
			top: {
				type: [Number, String],
				default: '-5'
			},
			imageWidth: {
				type: [Number, String],
				default: '50'
			},
			imageHeight: {
				type: [Number, String],
				default: '40'
			},
			textright: {
				type: [Number, String],
				default: '-3'
			},
			textbottom: {
				type: [Number, String],
				default: '-5'
			},
			size: {
				type: [Number, String],
				default: '31'
			}
		},
		mounted() {}
	}
</script>

<style>
	.userHeadPic {
		position:relative;
		float:left;
	/* 	width:140rpx;
		height:140rpx; */
		border-radius: 50%;
		background-color: #CCC;
		background-image: url('/static/icon/head.png');
		background-size: cover;
		background-position: center;
	}
</style>